<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>多Tab点击切换</title>
	</head>
	<body>
		<h2>多Tab点击切换</h2>
		<ul id="tab">
			<li id="tab1" value="1">10元套餐</li>
			<li id="tab2" value="2">30元套餐</li>
			<li id="tab3" value="3">50元套餐</li>
		</ul>
		<div id="container">
			<div id="content1">哈哈哈哈哈哈哈哈哈哈或或或或或或11111111</div>
			<div id="content2" style="display: none;">哈哈哈哈哈哈哈哈哈哈或或或或或或22222222</div>
			<div id="content3" style="display: none;">哈哈哈哈哈哈哈哈哈哈或或或或或或33333333</div>
		</div>
		
		<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			var $contents = $('#container>div')
			// 给3个li加监听
			// $('#tab>li').click(function(){//隐式遍历
			// 	// 隐藏所有内容div
			// 	$contents.css('display','none')
			// 	// 显示对应的内容div
			// 	// 得到当前点击的li在兄弟中的下标
			// 	var index = $(this).index()
			// 	// 找到对应的内容div,并显示
			// 	$contents[index].style.display='block'
			// 	// $($contents[index]).css('display','block')
			// })
			
			var currIndex = 0 //当前显示的内容div的下标
			$('#tab>li').click(function(){//隐式遍历
				// 隐藏当前显示想内容div
				$contents[currIndex].style.display='none'
				// 显示对应的内容div
				// 得到当前点击的li在兄弟中的下标
				var index = $(this).index()
				// 找到对应的内容div,并显示
				$contents[index].style.display='block'
				// $($contents[index]).css('display','block')
				
				// 更新下标
				currIndex = index
			})
		</script>
	</body>
</html>
